{% extends "administrative/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .basic-tabs{
            box-shadow: 0 1.5px 0 0 #1E90FF;
            color: #1E90FF;
        }
        .basic{
            width: 8%;height: 40px;line-height: 40px;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;
        }
        .input-style{
            display: inline-block;
            width: 95%;
            height: 35px;
            border: none;
            font-size: 14px;
            padding-left: 1%;
            margin-left: 1%;
        }

        .textarea-style{
            display: inline-block;
            width: 73%;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .halving_line{
            width: 80%;
            border: #cfcfcf solid 0.5px;
            margin-left: 2%;
        }
        .label_tag{
            width: 100px;
            text-align: right;
            vertical-align: top;
            font-size: 14px;
            line-height: 35px;
        }
        .add-station{
            width: 60%;height: 35px;background: #0070c1;border-color: #c5dbec;color: #ffffff;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #78C3F3;
            color: #00688B;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        .layui-laydate-content ul{
            z-index: 1000;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="meeting_room.html" style="color: #0b0b0b;">
                <i class="iconfont icon-faqi"></i>
                <span> 会议管理</span><span> > </span><span> 会议审批</span>
            </a>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button id="add_station" type="button" class="btn btn-default add-station preserve" onclick="Export()">提交</button>
        </div>
    </div>


    <div style="width: 100%;height: 93%;overflow: auto;">
        <div id="menu_from" style="width: 75%;height: 100%;margin-top: 0.2%;color: #2C3E50;display: inline-block;vertical-align: top;background: white;">
            <h3 id="form_name" style="text-align: center;font-size: 20px;margin-top: 1%;">会议室申请审批单</h3>

            <div style="width: 100%;height: 100%;display: inline-block;vertical-align: center;position: relative;">
                <div style="width: 95%;margin-left: 2.5%;margin-top: 1%;background: white;height: 40px;padding-left: 0.5%;line-height: 40px;background: #dfdfdf;">
                    基本信息
                </div>

                <div style="width: 95%;margin-left: 2.5%;">
                    <table style="width: 100%;">
                        <tr style="margin-left: 1%;">
                            <td style="width: 8%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                申请人
                            </td>
                            <td id="applicat" style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">{{ apply_detail.proposer }}</td>

                            <td style="width: 8%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                申请部门
                            </td>
                            <td id="department" style="width: 30%;border: #cfcfcf solid 0.5px;padding-left: 1%;line-height: 35px;">{{ apply_detail.department }}</td>
                        </tr>

                        <tr style="margin-left: 1%;">
                            <td style="width: 8%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                申请日期
                            </td>
                            <td style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">
                                {{ apply_detail.create_time }}
                            </td>

                            <td style="width: 8%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">

                            </td>
                            <td style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;"></td>
                        </tr>
                    </table>
                </div>

                <div style="width: 95%;margin-left: 2.5%;height: 40px;padding-left: 0.5%;line-height: 40px;margin-top: 1%;background: #dfdfdf;">
                    申请详情
                </div>

                <div style="width: 95%;margin-left: 2.5%;;">
                    <table style="width: 100%;">
                        <tr style="margin-left: 1%;">
                            <td style="width: 8%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                使用时间
                            </td>
                            <td id="start_time" style="width: 30%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                <input class="input-style" style="width: 90%;background: white;" type="text" name="car_start" id="car_start"
                                       placeholder="{{ apply_detail.meeting_start }}" value="{{ apply_detail.meeting_start }}">
                            </td>
                            <td id="end_time" style="width: 38%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                <input class="input-style" style="width: 90%;background: white;" type="text" name="car_end" id="car_end" placeholder="{{ apply_detail.meeting_end }}" value="{{ apply_detail.meeting_end }}">
                            </td>
                        </tr>
                    </table>


                    <table style="width: 100%;">
                        <tr style="margin-left: 1%;">
                            <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                会议主题
                            </td>
                            <td id="conference_theme" style="width: 68%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">{{ apply_detail.meeting_theme }}</td>
                        </tr>
                    </table>

                    <table style="width: 100%;">
                        <tr style="margin-left: 1%;">
                            <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                会议室
                            </td>
                            <td style="width: 68%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                <select name="meetingroom" id="meetingroom" style="width: 98%;border: 0;height: 35px;background: white;">
                                    {% autoescape off %}
                                        {{ html_str }}
                                    {% endautoescape %}
                                </select>
                            </td>
                        </tr>
                    </table>

                    <table style="width: 100%;">
                        <tr style="margin-left: 1%;">
                            <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                备注
                            </td>
                            <td style="width: 68%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                {{ apply_detail.meeting_marks }}
                            </td>
                        </tr>
                    </table>
                </div>

                <div id="approval_opinion" style="width: 95%;margin-left: 2.5%;height: 40px;padding-left: 0.5%;line-height: 40px;margin-top: 1%;background: #dfdfdf;">
                    审批意见
                </div>

                <div id="leader_opinion" style="width: 95%;margin-left: 2.5%;">
                    <table id="zhouyuanzhnag" style="width: 100%;">
                        <tr style="margin-left: 1%;">
                            <td style="width: 8%;height: 100px;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;line-height: 100px;text-align: center;">
                                党政办主任
                            </td>
                            <td style="width: 68%;height: 100px;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;padding-right: 1%;">

                            </td>
                        </tr>
                    </table>
                </div>

                <div style="width: 100%;height: 80px;text-align: center;margin-top: 1%;">
                    <button onclick="summit_data()" style="width: 60px;height: 30px;border: #cfcfcf solid 0.5px;border-radius: 7px;">提交</button>
                </div>
            </div>
        </div>

        <div style="width: 23%;height: 100%;display: inline-block;vertical-align: top;background: white;margin-top: 0.2%;">
            <div style="width: 100%;text-align: center;margin-top: 4%;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-kaishi"></i>开始</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;color: #00FF7F;">党政办主任 (孔智慧)</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">通知知会 (党政办公室)</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-jieshu"></i>结束</button></div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        window.onload = function () {
            document.getElementById("administrative").className = "add-nav-active";
            document.getElementById("meeting_management_ul").style.display = "inline-block";
            document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
            document.getElementById("organizational_management_ul").style.display = "none";
            document.getElementById("my_meeting_to_do").className = "add_class";

        };

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#car_start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#car_end' //指定元素
        });

        var property = {};
        var demo;
        var Minutes = new Date().getUTCMinutes();
        if (Minutes < 10) {
            Minutes = '0' + String(Minutes)
        }

        var Seconds = new Date().getSeconds();
        if (Seconds < 10) {
            Seconds = '0' + String(Seconds)
        }

        var Month = new Date().getMonth();
        if (Month < 9) {
            Month = '0' + String(Month + 1)
        } else {
            Month += 1
        }

        var Day = new Date().getDate();
        if (Day < 10) {
            Day = '0' + String(Day)
        }

        var request_type = "{{ request_type | safe }}";
        if (request_type === "my_apply"){
            document.getElementById("my_meeting").className = "add_class";
            document.getElementById("Director_opinion").style.display = "none";
        }else if (request_type === "my_backlog"){
            document.getElementById("my_meeting_to_do").className = "add_class";
            document.getElementById("approve_id").style.display = "none";
        }

        function click_ul() {
            if (document.getElementById("jiantou").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou").className = "iconfont icon-jiantou-xia";
                document.getElementById("organizational_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou").className = "iconfont icon-jiantou-shang";
                document.getElementById("organizational_management_ul").style.display = "none";
            }
        }

        function click_ul1() {
            if (document.getElementById("jiantou1").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-xia";
                document.getElementById("gebruikersrol_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-shang";
                document.getElementById("gebruikersrol_ul").style.display = "none";
            }
        }

        function click_ul2() {
            if (document.getElementById("jiantou2").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
                document.getElementById("meeting_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-shang";
                document.getElementById("meeting_management_ul").style.display = "none";
            }
        }

        function click_ul3() {
            if (document.getElementById("jiantou3").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-xia";
                document.getElementById("issue_approval_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-shang";
                document.getElementById("issue_approval_ul").style.display = "none";
            }
        }

        function summit_data() {
            document.getElementById("loading").style.display = "inline-block";
            var application_id = String( window.location).split("application_id=")[1];
            var nuclear_draft = $("input[type=radio][name=nuclear_draft]:checked").val();               // 审批是否同意
            var approval_opinion = document.getElementById("approval_opinion_1").value;
            var MeetingInfo_id = String( window.location).split("MeetingInfo_id=")[1].split("&")[0];
            var start_time = document.getElementById("start_time").innerText;
            var end_time = document.getElementById("end_time").innerText;
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/meeting_detail.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("regimentation=会议管理"+"&table_name=会议室申请"+"&application_id="+String(application_id)+"&nuclear_draft="+String(nuclear_draft)+"&approval_opinion="+String(approval_opinion)+"&MeetingInfo_id="+String(MeetingInfo_id)+"&start_time="+String(start_time)+"&end_time="+String(end_time));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200){
                            alert("审批成功");
                            window.location = "/administrative/meeting_backlog.html";
                        }
                    }
                }
            };
        }
        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }

        function Export() {
            document.getElementById("loading").style.display = "inline-block";
            var start_time = document.getElementById("car_start").value;           // 开始时间
            var end_time = document.getElementById("car_end").value;           // 结束时间
            var meetingroom = document.getElementById("meetingroom").value;                 // 会议室
            var application_id = window.location.href.split("application_id=")[1].split("&")[0];           // 流程ID
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/resubmmit_meeting", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("start_time="+String(start_time)+"&end_time="+String(end_time)+"&meetingroom="+String(meetingroom)+"&application_id="+String(application_id));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200){
                            alert("提交成功");
                            window.location = "/administrative/my_meeting.html";
                        }else {
                            alert(JsonDate['status']);
                        }
                    }
                }
            };
        }
    </script>
{% endblock %}

